<template>
  <div class="app-container">

    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="userQuery.userId" placeholder="用户ID"/>
      </el-form-item>

      <el-form-item>
        <el-input v-model="userQuery.name" placeholder="用户名称"/>
      </el-form-item>

      <el-form-item>
        <el-input v-model="userQuery.phone" placeholder="电话号码"/>
      </el-form-item>

      <el-form-item>
        <el-select v-model="userQuery.level" clearable placeholder="用户等级">
          <el-option :value="1" label="普通用户"/>
          <el-option :value="2" label="贫困用户"/>
        </el-select>
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="sreachList()">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>

    <!-- 表格 -->
    <el-table
      :data="list"
      border
      fit
      highlight-current-row>

      <el-table-column
        label="序号"
        width="70"
        align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="userId" label="用户ID" align="center" width="180"/>

      <el-table-column label="头像" align="center" prop="avatar" width="180">
        <template slot-scope="scope">
          <img class="el-avatar--circle" :src="scope.row.avatar" width="100" height="100"/>
        </template>
      </el-table-column>

      <el-table-column prop="name" label="名称" align="center" width="180"/>

      <el-table-column prop="phone" label="电话号码" width="200"/>

      <el-table-column label="等级" width="180" align="center">
        <template slot-scope="scope">
          {{ scope.row.level === 1 ? '普通用户' : '贫困用户' }}
        </template>
      </el-table-column>

      <el-table-column label="账号状态" width="150" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isDeleted===1" type="danger">
            禁用
          </el-tag>
          <el-tag v-if="scope.row.isDeleted===0" type="success">
            正常
          </el-tag>
        </template>
      </el-table-column>


      <el-table-column prop="gmtCreate" label="添加时间" align="center" width="250"/>

      <el-table-column label="操作" width="292" align="center">
        <template slot-scope="scope">

          <el-button type="primary" size="mini" icon="el-icon-edit" @click="editDialog(scope.row.userId)">编辑</el-button>

          <el-button type="danger" size="mini" :disabled="scope.row.isDeleted==1" icon="el-icon-delete"
                     @click="removeDataById(scope.row.userId)">
            禁用
          </el-button>
          <el-button type="warning" size="mini" :disabled="scope.row.isDeleted==0" icon="el-icon-delete"
                     @click="addDataById(scope.row.userId)">
            启用
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--    编辑框-->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >

      <el-form ref="form" :model="editForm" label-width="80px" :rules="editFormRules">

        <el-upload
          class="avatar-uploader"
          action="http://localhost:8080/oss/fileoss/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload" align="center" label="头像">
          <img :src="editForm.avatar" class="el-avatar--circle" width="100" height="100">
        </el-upload>

        <el-form-item label="昵称" prop="name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="editForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="等级" width="180">
          <el-select v-model="editForm.level" clearable placeholder="用户等级">
            <el-option :value="1" label="普通用户"/>
            <el-option :value="2" label="贫困用户"/>
          </el-select>
        </el-form-item>


      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirmDialog">确 定</el-button>
  </span>
    </el-dialog>


    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getList"
    />

  </div>
</template>
<script>
//引入调用list.js文件
import user from '@/api/wd/user'

export default {
  data() { //定义变量和初始值
    return {
      list: null,//查询之后接口返回集合
      page: 1,//当前页
      limit: 10,//每页记录数
      total: 0,//总记录数
      userQuery: {},//条件封装对象
      dialogVisible: false, //是否展示编辑框
      editForm: {
        userId: "",
        level: "",
        avatar: "",
        name: "",
        phone: "",
      },
      editFormRules: {
        name: [
          {required: true, message: '请输入昵称', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请输入手机号', trigger: 'blur'}
        ]
      }

    }
  },
  created() { //页面渲染之前执行，一般调用methods定义的方法
    //调用
    this.getList()
  },
  methods: {  //创建具体的方法，调用teacher.js定义的方法
    //讲师列表的方法
    getList(page = 1) {
      this.page = page
      user.getPageList(this.page, this.limit, this.userQuery)
        .then(response => {//请求成功
          //response接口返回的数据
          //console.log(response)
          this.list = response.data.list
          this.total = response.data.total
        })
    },
    //
    sreachList(page = 1) {
      this.page = page
      user.searchPageList(this.page, this.limit, this.userQuery)
        .then(response => {//请求成功
          //response接口返回的数据
          //console.log(response)
          this.list = response.data.list
          this.total = response.data.total
        })
    },
    resetData() {//清空的方法
      this.userQuery = {}
      this.getList()
    },
    //封禁用户的方法
    removeDataById(id) {
      this.$confirm('此操作封禁用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {  //点击确定，执行then方法
        //调用删除的方法
        user.deleteUserId(id)
          .then(response => {//删除成功
            //提示信息
            this.$message({
              type: 'success',
              message: '禁用成功!'
            });
            //回到列表页面
            this.getList()
          })
      }) //点击取消，执行catch方法
    },
    //启用用户的方法
    async addDataById(id){
      const res = await user.repeatUser(id)
      if (res.code == "20000") {
        this.$message({
          type: 'success',
          message: '启用成功!'
        });
      }
      this.getList()
    },

    //点击弹出编辑框
    async editDialog(id) {
      this.dialogVisible = true;
      const res = await user.getOne(id);
      this.editForm.level = res.data.user.level;
      this.editForm.avatar = res.data.user.avatar;
      this.editForm.phone = res.data.user.phone;
      this.editForm.name = res.data.user.name;
      this.editForm.userId = res.data.user.userId
    },

    handleAvatarSuccess(res, file) {
      this.editForm.avatar = file.response.data.url
    },
    //图片大小不能超过10MB
    beforeAvatarUpload(file) {
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isLt10M) {
        this.$message.error('上传头像图片大小不能超过 10MB!');
      }
      return isLt10M;
    },
    //提交表单
    async confirmDialog() {
      this.dialogVisible = false;
      const res = await user.updateUser(this.editForm)
      if (res.code == "20000") {
        this.$message({
          message: '修改成功',
          type: 'success'
        });
      }
      this.getList()
    }

  }


}
</script>
